<template>
  <ex-dialog width="800px" class="ex-diolog" title="上传背景图" :visible="visible" @closeDialog="handleClose">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
      <el-form-item label="背景图片:" prop="imgUrl" ref="imgRef">
        <ImageUploadMore :limit="1" :fileSize="20" @successImg="getImg" :value="ruleForm.imgUrl">
        </ImageUploadMore>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
        <el-button @click="handleClose('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  getIndexImg,
  changeImg
} from '@/api/incentiveManagement/integralTool'

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {

    return {
      title: '上传背景图',
      loading: false,
      imgLoading: false,
      ruleForm: {
        imgUrl:'',
      },
      rules: {
        imgUrl: [
          { required: true, message: '请上传图片', trigger: 'change' }
        ],
      }
    }
  },
  computed: {

  },
  created() {
    this.getDatail()
  },
  methods: {
    //获取轮播图详情
    getDatail() {
      getIndexImg().then(res => {
        this.ruleForm.img = res.result
      })
    },
    //新建
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          var data = {
            ...this.ruleForm
          }
          changeImg(data).then(res => {
            setTimeout(() => {
              this.$message.success('修改成功')
              this.handleClose()
              this.$emit('success')
              this.loading = false
            }, 1000);
          }).catch(() => {
            this.loading = false
          }).finally(() => {

          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //上传图片
    getImg(e) {
      this.ruleForm.imgUrl = e
      this.$refs['imgRef'].clearValidate();
    },
    //取消
    handleClose(formName) {
      this.$emit('update:visible', false)
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}

::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}

.avatar-uploader2 {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 130px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
}

.banner_img {
  width: 130px;
  height: 130px;
}

.el-input {
  width: 300px;
}

.lable_l {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0 20px 0;

  .left {
    margin-right: 20px;
  }
}

.bannerBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .rig_btn_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    height: 200px;

    .el-button {
      margin: 0;
    }
  }
}

.imgBox {
  border: 1px solid #f5f5f5;
  border-radius: 12px;
  padding: 20px;
  width: 800px;

  .name {
    font-size: 16px;
    color: #606266;
    margin-bottom: 10px;
    padding-left: 50px;
  }
}
</style>